forum

home / developersection / forums / modal through html, css and javascript

Ask Question

Modal through HTML, CSS and JavaScript

Anonymous User 513 20-Jul-2021

What is Modal in webpage? How to make a Modal through HTML, CSS and JavaScript?

html html  css-css3 
Updated on 20-Jul-2021
Anonymous User

Software Developer Trainee

I am a content writter !

Follow
Can you answer this question?
Answer

1 Answers

Anonymous User

Anonymous User

04-Aug-2021

A modal is a pop up window created by the developer to capture the user's attraction to a particular subject or thing. A modal, also called a modal window or lightbox, is displayed in front of all other content on the webpage and it disables all actions of the website. The user is not able to go through any page without interacting with the modal. Modals are often used to draw users' attention to some important action or information on a website or an application.

Let's have a look on the below code : 

<!DOCTYPE html>

<html>

<head>

    <meta name='viewport' content='width=device-width, initial-scale=1'>

    <style>

        body {

            font-family: Arial, Helvetica, sans-serif;

        }

        .modal {

            display: none; 

            position: fixed;

            z-index: 1; 

            padding-top: 100px; 

            left: 0;

            top: 0;

            width: 100%; 

            height: 100%; 

            overflow: auto; 

            background-color: rgb(0,0,0); 

            background-color: rgba(0,0,0,0.4);

        }

        .modal-content {

            background-color: #fefefe;

            margin: auto;

            padding: 20px;

            border: 1px solid #888;

            width: 80%;

        }

        .close {

            color: #aaaaaa;

            float: right;

            font-size: 28px;

            font-weight: bold;

        }

            .close:hover,

            .close:focus {

                color: #000;

                text-decoration: none;

                cursor: pointer;

            }

    </style>

</head>

<body>

    <h2>Modal Example</h2>

    <button id='myBtn'>Open Modal</button>

    <div id='myModal' class='modal'>

        <div class='modal-content'>

            <span class='close'>&times;</span>

            <p>Some text in the Modal..</p>

        </div>

    </div>

    <script>

        var modal = document.getElementById('myModal');

        var btn = document.getElementById('myBtn');

        var span = document.getElementsByClassName('close')[0];

        btn.onclick = function () {

            modal.style.display = 'block';

        }

        span.onclick = function () {

            modal.style.display = 'none';

        }

        window.onclick = function (event) {

            if (event.target == modal) {

                modal.style.display = 'none';

            }

        }

    </script>

</body>

</html>

Hope this code will be helpful for you.

Happy Coding!

MindStick Training
MindStick Training

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy